import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { Auth } from '/@/module/Auth.ts'
import { CommonStorage } from '/@/storage/CommonStorage.ts'

export interface CustomMeta {
  title?: string // 中文名
  type?: 'MENU' | 'CATALOG' // 类型;菜单MENU或目录CATALOG
  icon?: string // 图标
  color?: string // 主题颜色
  layoutName?: string // 布局页面的组件名称。布局页面的组件名称，表示当前记录在哪个布局页面内。仅顶级有效


}

export type RouteMetaRecordRaw = RouteRecordRaw & { meta?: CustomMeta }

/**
 * 使用这种方式，每一次获取的都是一个全新的对象，防止不必要地修改影响
 */
export const generateDefaultRouterList = () => {
  /**
   * 菜单页面放到Layout中，独立页面放到最外层
   * 假如我还有其他的布局页面，那么其相应的菜单页面也应该放到其他的布局页面中
   */
  return [
    {
      path: '/layout',
      component: () => import('/@/views/layout/home/Layout.vue'), // 主布局页面
      name: 'Layout',
      children: [
        {
          path: 'hello1',
          component: () => import('/@/views/testRouter/Hello1.vue'),
          name: 'Hello1',
          meta: { type: 'PAGE' },
        },
        {
          path: 'hello2',
          component: () => import('/@/views/testRouter/Hello2.vue'),
          name: 'Hello2',
          meta: { type: 'PAGE' },
        },
        {
          path: 'hello3',
          component: () => import('/@/views/testRouter/Hello3.vue'),
          name: 'Hello3',
          meta: { type: 'PAGE' },
        },
      ],
    },

    // 登录页面
    { path: '/login', component: () => import('/@/views/login/Login.vue'), name: 'Login' },
    { path: '/elTableTest', component: () => import('/@/views/test/elTableTest.vue'), name: 'ElTableTest'}
  ]
}

export const DefaultRouteList: RouteRecordRaw[] = generateDefaultRouterList()

const router = createRouter({
  history: createWebHistory(),
  routes: DefaultRouteList,
})

const ignoreLoginRouter: string[] = ['Login']
router.beforeEach(async to => {
  // 如果存储中没有菜单，说明没有从后端获取菜单且没有动态添加到路由中，这时候需要重新请求菜单
  // 跳转到某些不需要登录的页面时，如果没有菜单则不能进行菜单查询，否则会陷入死循环
  // TODO 由于登录校验写在了axios的请求拦截器中，所以这里可能会比较乱，可以考虑将登录校验写在这里
  if (!CommonStorage.instance.has('menu') && !ignoreLoginRouter.includes(to.name as string)) {
    await Auth.resetMenuAndRouter()
    return to.fullPath
  }
})

export default router
